<template>
	<div class="h-screen">
		<UpPullLoad @trigger="loadMore">
			<Topbar leftCompName="back" class="sticky top-0 z-20 bg-white">
				<div class="flex items-center justify-center h-full text-gray-600">问答</div>
				<template #left>
					<div class="flex items-center h-full">
						<Back class="text-gray-400 " />
					</div>
				</template>
				<template #right>
					<div class="grid w-8 h-8 text-gray-400 rounded-full bg-white/50 place-content-center">
						<IRiSearch2Line class="" />
					</div>
				</template>
			</Topbar>

			<div class="flex mt-2">
				<div class="px-4 space-x-4 overflow-x-auto text-sm leading-7 text-center grow whitespace-nowrap">
					<div class="inline-block " v-for="(item, index) in items">
						<div class="w-10 h-10 overflow-hidden rounded-full">
							<LazyImage :src="item.src" />
						</div>
						<div>{{ item.name }}</div>
					</div>
				</div>
				<div class="flex items-center px-4 text-lg shrink-0">
					<IHeroicons-outline:view-grid />
				</div>
			</div>

			<div class="grid h-32 grid-cols-3 grid-rows-2 gap-3 px-3 mt-4">
				<LazyImage :src="item" v-for="(item, index) in categorys" />
			</div>

			<div class="mt-6">
				<Tabs @change="change">
					<TabItem :title="item" v-for="(item, index) in  ['热门', '饮食健康', '疾病', '清洁护理', '驱虫免疫']">
						<div class=" px-2 divide-y">
							<div v-for="(item, index) in list" class="py-3">
								<RouterLink :to="{
									name:'school-detail',
									params:{
										id:1
									}
								}">
									<div class="flex px-3 text-sm text-gray-700">
										<div class="grow">
											<div class="text-base line-clamp-1">有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？</div>
											<div class="flex items-center mt-1">
												<div class="w-6 h-6 overflow-hidden bg-green-100 rounded-full">
													<LazyImage :src="items[1].src" />
												</div>
												<div class="ml-2">
													萌宠救助站
												</div>
											</div>
											<div class="mt-3 text-gray-400 line-clamp-2">
												有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？
											</div>
										</div>
										<div v-if="index%2==0" class="h-24 ml-2 overflow-hidden rounded-lg w-28 shrink-0">
											<LazyImage :src="items[0].src" />
										</div>
									</div>
								</RouterLink>
								<div class="px-4 mt-4">
									<LikeCommentShareTool />
								</div>
							</div>
						</div>
					</TabItem>
				</Tabs>
			</div>
		</UpPullLoad>
	</div>
</template>
    
<script setup lang='ts'>
const list = ref([1, 2, 3, 4, 5]);
const change = (index: number) => {
	list.value = [1, 2, 3, 4, 5];
}
const loadMore = ({ done }: any) => {
	setTimeout(() => {
		list.value.push(1, 2, 3, 4, 5, 6, 7)
		done();
	}, 100);
}
//@ts-nocheck
const items = Object.values(
	import.meta.glob<string>('~/assets/cat/*', { eager: true, import: 'default' })
).map(item => {
	return {
		name: '美短',
		src: item
	}
})
const categorys = Object.values(
	import.meta.glob<string>('~/assets/school/*', { eager: true, import: 'default' })
)
</script>
    
<style scoped lang="scss">
:deep(.search) {
	@apply bg-gray-100;

	.search-text {
		@apply text-gray-500;
	}
}

:deep(.search-icon) {
	@apply text-gray-500;
}
</style>